import React, {useState, useEffect} from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'
import Home from '../../views/newsSandBox/home/home'
import NoFermission from '../../views/newsSandBox/noFermission/NoFermission'
import RightList from '../../views/newsSandBox/right-manage/RightList'
import RoleList from '../../views/newsSandBox/right-manage/RoleList'
import UserList from '../../views/newsSandBox/user-manage/UserList'
import NewsAdd from '../../views/newsSandBox/news-manage/Add'
import NewsDraft from '../../views/newsSandBox/news-manage/Draft'
import NewsCategory from '../../views/newsSandBox/news-manage/Category'
import Audit from '../../views/newsSandBox/audit-manage/Audit'
import AuditList from '../../views/newsSandBox/audit-manage/List'
import Unpublished from '../../views/newsSandBox/publish-manage/Unpublished'
import Published from '../../views/newsSandBox/publish-manage/Published'
import Sunset from '../../views/newsSandBox/publish-manage/Sunset'
import Preview from '../../views/newsSandBox/news-manage/Preview'
import Update from '../../views/newsSandBox/news-manage/Update'
import AlreadyOffline from '../../views/newsSandBox/release-manage/AlreadyOffline'
import AwaitRelease from '../../views/newsSandBox/release-manage/AwaitRelease'
import ReleaseList from '../../views/newsSandBox/release-manage/ReleaseList'
import axios from 'axios'
import {Spin} from 'antd'
import {connect} from 'react-redux'



const NewsRouter = (props) => {
  console.log('router', props)
  const [backRouteList, setbackRouteList] = useState([])
  const {role: {rights}} = JSON.parse(localStorage.getItem('token'))

  useEffect(() => {
    axios.get('/userList/routerJurisdiction').then(response => {
      const {data: {data}} = response
      setbackRouteList(data)
    })
  }, [])
  // 路由映射表
  const LocalRouterList = {
    "/home": Home,
    "/user-manage/list": UserList,
    "/right-manage/role/list": RoleList,
    "/right-manage/right/list": RightList,
    "/news-manage/add": NewsAdd,
    "/news-manage/draft": NewsDraft,
    "/news-manage/category": NewsCategory,
    "/audit-manage/audit": Audit,
    "/audit-manage/list": AuditList,
    "/publish-manage/unpublished": Unpublished,
    "/publish-manage/published": Published,
    "/publish-manage/sunset": Sunset,
    '/news-manage/preview/:id': Preview,
    '/news-manage/update/:id': Update,
    '/release-manage/AlreadyOffline': AlreadyOffline,
    '/release-manage/AwaitRelease': AwaitRelease,
    '/release-manage/ReleaseList': ReleaseList
  }

  const checkRoute = (item) => {
    // 映射表中是否存在此路径 && pagePermission是否为1 
    return LocalRouterList[item.key] && item.pagePermission
  }

  // 当前登录用户所具备权限
  const checkUserPermission = (item) => {
    return rights.includes(item.key)
  }

  return (
    <Spin size="large" spinning={props.isLoading}>
      <Switch>
        {
          backRouteList.map(item => {
            if(checkRoute(item) && checkUserPermission(item)) {
              return <Route 
                path={item.key} 
                key={item.key} 
                component={LocalRouterList[item.key]}
                exact
              ></Route>  
            }
            return null
          } 
          )
        }
        <Redirect from="/" to='/home' exact></Redirect>
        {
          // backRouteList.length长度>0才会渲染Route标签,要不然会出现一闪而过的403,以为一开始数据没有请求回来时权限数组为空
          backRouteList.length > 0 && <Route path="*" component={NoFermission}></Route>
        }
      </Switch>
    </Spin>
  )
}
const mapStateToProps = ({LoadingReducer: {isLoading}}) => {
  return {
    isLoading
  }
}

export default connect(mapStateToProps)(NewsRouter)